@import "three-dot.less";

html, body {
  overflow: hidden;
}

.big-screen {
  width: 100%;
  height: 100%;
  flex-direction: column;
  background: #141519;

  * {
    transform-origin: 0 0;
  }


  .controllerScreenLayout {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .controller-left {
      overflow: hidden;
      float: left;
      display: flex;
      flex-direction: column;
      position: relative;
      height: 100%;
      box-sizing: border-box;
      color: #c1fffb;
      background: #141519;
      font-size: 14px;

      .cml-panel-logo {
        display: flex;
        flex-shrink: 0;
        height: 70px;
        margin: 30px 0px 30px 20px;
        box-sizing: border-box;

        .cml-panel-logo-img {
          position: relative;
          width: 75px;
          height: 100%;
          border: 1px solid rgba(202, 255, 247, .2);
          border-top-color: rgba(193, 255, 251, .4);
          border-bottom-color: rgba(193, 255, 251, .4);
          border-image: 1 linear-gradient(180deg, rgba(202, 255, 247, .2) 0, rgba(202, 255, 247, .2) 20%, transparent 0, transparent 80%, rgba(202, 255, 247, .2) 0, rgba(202, 255, 247, .2));
          background: linear-gradient(to left, #9EE7FF, #9EE7FF) no-repeat left top,
          linear-gradient(to left, #9EE7FF, #9EE7FF) no-repeat right top,
          linear-gradient(to left, #9EE7FF, #9EE7FF) no-repeat left bottom,
          linear-gradient(to left, #9EE7FF, #9EE7FF) no-repeat right bottom,
          transparent;
          background-size: 3px 3px, 3px 3px, 3px 3px, 3px 3px;

          .cml-panel-logo-helper {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            text-align: center;
            flex-direction: row;
            align-items: center;
            justify-content: center;
          }
        }

        .cml-panel-logo-text {
          position: relative;
          padding-left: 10px;
          box-sizing: border-box;
          border-top: 1px solid rgba(202, 255, 247, .2);
          border-bottom: 1px solid rgba(202, 255, 247, .2);
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background: linear-gradient(to top, #9EE7FF, #9EE7FF) no-repeat right top,
          linear-gradient(to bottom, #9EE7FF, #9EE7FF) no-repeat right bottom, transparent;
          background-size: 3px 3px, 3px 3px, 3px 3px, 3px 3px;

          .cml-panel-text-en {
            align-self: flex-start;
            text-transform: uppercase;
            font-size: 13px;
            letter-spacing: .00001em;
            height: 10px;
            line-height: 15px;

          }

          .cml-panel-text-ch {
            padding-top: -4px;
            color: rgba(68, 203, 215, .6);
            font-size: 12px;
            letter-spacing: .4em;
            height: 15px;
            line-height: 15px;
          }

          p {
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
          }
        }
      }

      .cml-tabs {
        .el-tabs__item {
          box-sizing: border-box;
          display: inline-block;
          list-style: none;
          font-size: 14px;
          font-weight: 500;
          position: relative;
          color: #ffffff;
        }

        .is-active {
          color: #409eff;
        }

        .cml-project {
          list-style: none;
          margin: -8px 0px 0px -40px;

          li {
            list-style: none;
            height: 40px;
            line-height: 40px;

            .platformicon {
              border: 1px #409eff solid;
              padding: 2px;
              font-size: 12px;
            }

            span {
              margin: 0px 0px 0px 10px;
            }
          }
        }
      }
    }

    .controller-right {
      width: 100%;
      height: 100%;
      overflow: hidden;
      float: left;
      .big-screen-page-box {
        width: 100%;
        height: 100%;
        padding: 0px 15px 10px 15px;
      }

      .page-content-wrapper {
        margin: 30px 0px;
        width: 100%;
        height: calc(100% - 60px);

        /**header 样式**/
        .big-screen-header {
          width: 100%;
          height: 60px;
          line-height: 60px;
          background: url("images/header/header_bg_1.png")  center center no-repeat;
          background-size: cover;
          color:#FFFFFF;
          text-align: center;
          font-size: 28px;
          font-weight: bolder;

          .gsap-title{
            width:500px;
            height: 60px;
            line-height: 60px;
          }
        }

        //描述
        .page-content-header-wrapper {
          padding-left: 40px;
          height: 39px;

          * {
            font-size: 12px;
            color: #729693;
          }
        }

        .page-box {
          width: 100%;
          height: 100%;
          background: #181e24 url("images/bg.png") center center no-repeat;
          background-size: cover;

          .pageScaleBox {
            transform: scale(var(--scale));
            display: flex;
          }

          .echarts-box {
            float: left;
            border: 1px red solid;
            margin: 5px;
          }

        }
      }
    }
  }



}

@import "echarts.less";
